<template>
    <view class="container">
        <view class="left text-2line-ellipsis">
            <template v-if="detailobj.name.length">
                {{detailobj.name}}
            </template>
        </view>
        <view class="right">
            <view class="top">
                距活动结束时间
            </view>
            <view class="bottom">
                <view class="block">
                    {{countDownObj.day}}
                </view>
                天
                <view class="block">
                    {{countDownObj.hour}}
                </view>
                :
                <view class="block">
                    {{countDownObj.minute}}
                </view>
                :
                <view class="block">
                    {{countDownObj.second}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    var rate = 1;
    var timeId = null
    export default {
        props: ['detailobj'],
        data() {
            return {
                //===配置参数
                title: '',
                endTime: 0,
                countDownObj: {
                    day: '--',
                    hour: '--',
                    minute: '--',
                    second: '--',
                },
            }
        },
        watch: {
            detailobj: {
                handler: function observer(val) {
                    console.log("data:", val)
                    this.setAwardList();
                },
                deep: true,
                immediate: true,
            }
        },

        mounted() {

        },
        methods: {       
            setAwardList(){
                // this.detailobj.goodses
                let that = this
                function formatNumber(n) {
                	n = n.toString();
                	return n[1] ? n : '0' + n;
                }
                
                console.log(that.detailobj)            
                clearInterval(timeId)
                if (that.detailobj.endTime){
                    that.endTime = new Date(that.detailobj.endTime);
                    timeId = setInterval(()=>{
                        var date = new Date();
                        if ((that.endTime - date)>0){
                            var lefttime = that.endTime - date
                            var leftd = Math.floor(lefttime/(1000*60*60*24));  //计算天数
                            var lefth = Math.floor(lefttime/(1000*60*60)%24);  //计算小时数
                            var leftm = Math.floor(lefttime/(1000*60)%60);  //计算分钟数
                            var lefts = Math.floor(lefttime/1000%60);  //计算秒数
                            if (leftd>100){
                                that.countDownObj.day = leftd;
                            }else{
                                that.countDownObj.day = formatNumber(leftd);
                            }
                            that.countDownObj.hour = formatNumber(lefth);
                            that.countDownObj.minute = formatNumber(leftm);
                            that.countDownObj.second = formatNumber(lefts);
                        }else{
                            that.countDownObj.day = '00'
                            that.countDownObj.hour = '00'
                            that.countDownObj.minute = '00'
                            that.countDownObj.second = '00' 
                        }
                    },1000)
                }else{
                    that.countDownObj.day = '--'
                    that.countDownObj.hour = '--'
                    that.countDownObj.minute = '--'
                    that.countDownObj.second = '--'                  
                }
            }
            
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 750rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 120rpx;
        background-size: 100% 100%;
        overflow: hidden;
        background-image: url(../../../static/image/activityBgTitle.jpg);
        border: 0;
        padding: 0;
        margin: 0;
        .left{
            margin-left: 23rpx;
            width: 400rpx;
            color: #ffffff;
            font-size: 32rpx;
            font-weight: bold;
            line-height: 50rpx;
        }
        .right{
            margin-right: 21rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            .top{
                font-size: 24rpx;
                color: #f43628;
                margin-bottom: 15rpx;
            }
            .bottom{
                display: flex;
                align-items: center;
                font-size: 26rpx;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0rpx;
                color: #f43628;
                .block{
                   	// width: 42rpx;
                   	height: 42rpx;
                   	background-color: #f43628;
                   	border-radius: 4rpx;
                    font-size: 26rpx;
                    color: #ffffff;
                    line-height: 42rpx;
                    text-align: center;
                    margin: 0 7rpx;
                    padding: 0 6rpx;
                }
            }
        }
    }





</style>
